<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约会推荐 - 心动社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 0.8rem 0;
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #ff4d6d;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .nav-link {
            color: #555;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #ff4d6d;
        }
        
        /* 页面标题区域 */
        .page-header {
            margin-bottom: 2rem;
        }
        
        .page-title {
            font-weight: 800;
            font-size: 2rem;
            margin-bottom: 0.5rem;
            color: #2d3748;
        }
        
        .page-subtitle {
            color: #718096;
            max-width: 600px;
        }
        
        /* 分类导航 */
        .category-scroll {
            overflow-x: auto;
            padding: 0.5rem 0;
            margin-bottom: 1.5rem;
            scrollbar-width: thin;
        }
        
        .category-scroll::-webkit-scrollbar {
            height: 4px;
        }
        
        .category-scroll::-webkit-scrollbar-thumb {
            background-color: #ddd;
            border-radius: 2px;
        }
        
        .category-list {
            display: flex;
            gap: 0.75rem;
            min-width: max-content;
        }
        
        .category-item {
            padding: 0.5rem 1.25rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            background-color: white;
            border: 1px solid #e2e8f0;
            color: #6b7280;
            white-space: nowrap;
        }
        
        .category-item:hover {
            border-color: #ff4d6d;
            color: #ff4d6d;
        }
        
        .category-item.active {
            background-color: #ff4d6d;
            color: white;
            border-color: #ff4d6d;
        }
        
        /* 卡片基础样式 */
        .dating-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 1.5rem;
        }
        
        .dating-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.08);
        }
        
        /* 图片容器和多图布局 */
        .img-container {
            position: relative;
            overflow: hidden;
        }
        
        .img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .dating-card:hover .img-container img {
            transform: scale(1.05);
        }
        
        .img-grid {
            display: grid;
            gap: 2px;
            height: 100%;
        }
        
        .img-1 { grid-template-columns: 1fr; }
        .img-2 { grid-template-columns: 1fr 1fr; }
        .img-3 { 
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        .img-3 img:first-child {
            grid-column: 1;
            grid-row: 1 / 3;
        }
        .img-4 { 
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        
        /* 无图片状态 */
        .no-img {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #f9fafb;
            color: #9ca3af;
            text-align: center;
            padding: 2rem 1rem;
            height: 100%;
        }
        
        .no-img i {
            font-size: 3rem;
            margin-bottom: 0.75rem;
            color: #ffccd5;
        }
        
        /* 标签和徽章 */
        .date-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background-color: #ff4d6d;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            z-index: 10;
        }
        
        .category-label {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.75rem;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        /* 分类颜色 */
        .cat-food { background-color: #fff3cd; color: #856404; }
        .cat-movie { background-color: #d1ecf1; color: #0c5460; }
        .cat-sport { background-color: #d4edda; color: #155724; }
        .cat-art { background-color: #f8d7da; color: #721c24; }
        .cat-travel { background-color: #e0cffc; color: #5a2ca0; }
        .cat-music { background-color: #ffe8cc; color: #c05700; }
        .cat-study { background-color: #ccfbf1; color: #065f46; }
        
        /* 卡片内容 */
        .card-content {
            padding: 1.25rem;
        }
        
        .card-title {
            font-weight: 600;
            font-size: 1.15rem;
            margin-bottom: 0.5rem;
            color: #1f2937;
            transition: color 0.3s;
            line-height: 1.4;
        }
        
        .dating-card:hover .card-title {
            color: #ff4d6d;
        }
        
        .card-desc {
            color: #6b7280;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #f3f4f6;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
            border: 2px solid #f3f4f6;
        }
        
        .author-details {
            flex: 1;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.9rem;
            margin: 0 0 2px 0;
            color: #374151;
        }
        
        .location-info {
            font-size: 0.8rem;
            color: #9ca3af;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 统计和操作区 */
        .card-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
        }
        
        .stats {
            display: flex;
            gap: 1.25rem;
            color: #6b7280;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .actions {
            display: flex;
            gap: 1rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #6b7280;
            cursor: pointer;
            transition: color 0.2s;
            padding: 3px;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.85rem;
        }
        
        .action-btn:hover {
            color: #ff4d6d;
        }
        
        .action-btn.liked {
            color: #ff4d6d;
        }
        
        .action-btn.saved {
            color: #f59e0b;
        }
        
        /* 特殊布局 */
        .featured-card {
            display: flex;
        }
        
        .featured-img {
            width: 45%;
        }
        
        .featured-content {
            width: 55%;
            display: flex;
            flex-direction: column;
        }
        
        .featured-content .card-desc {
            -webkit-line-clamp: 3;
            margin-bottom: auto;
        }
        
        .horizontal-card {
            display: flex;
        }
        
        .horizontal-img {
            width: 30%;
        }
        
        .horizontal-content {
            width: 70%;
        }
        
        .grid-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .masonry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .masonry-item {
            break-inside: avoid;
            margin-bottom: 1.5rem;
        }
        
        /* 推荐标签 */
        .recommendation-tag {
            position: absolute;
            top: 12px;
            right: 12px;
            background-color: rgba(255, 255, 255, 0.9);
            color: #ff4d6d;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .featured-card {
                flex-direction: column;
            }
            
            .featured-img, .featured-content {
                width: 100%;
            }
            
            .featured-img {
                max-height: 300px;
            }
        }
        
        @media (max-width: 768px) {
            .horizontal-card {
                flex-direction: column;
            }
            
            .horizontal-img, .horizontal-content {
                width: 100%;
            }
            
            .card-actions {
                flex-wrap: wrap;
                gap: 0.75rem;
            }
            
            .actions {
                width: 100%;
                justify-content: flex-end;
            }
            
            .page-title {
                font-size: 1.75rem;
            }
        }
        
        @media (max-width: 576px) {
            .stats {
                width: 100%;
                flex-wrap: wrap;
                gap: 0.75rem 1rem;
            }
            
            .navbar-nav {
                gap: 0.5rem !important;
            }
            
            .category-item {
                padding: 0.4rem 1rem;
                font-size: 0.85rem;
            }
        }
        
        /* 动画效果 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        /* 加载更多按钮 */
        .load-more {
            background-color: white;
            color: #ff4d6d;
            border: 1px solid #ff4d6d;
            padding: 0.6rem 2rem;
            border-radius: 30px;
            font-weight: 500;
            transition: all 0.2s;
            margin: 1rem auto 2rem;
            display: block;
        }
        
        .load-more:hover {
            background-color: #ff4d6d;
            color: white;
        }
        
        .load-more.loading {
            opacity: 0.7;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-heart"></i>
                <span>心动社交</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ms-auto gap-4">
                    <li class="nav-item">
                        <a href="#" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active">约会推荐</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">附近的人</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">消息</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-danger">
                            <i class="fas fa-plus me-1"></i> 发起约会
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">为你推荐的约会</h1>
            <p class="page-subtitle">基于你的兴趣和偏好，发现最合适的约会活动，遇见有趣的人</p>
        </div>
        
        <!-- 分类导航 -->
        <div class="category-scroll">
            <div class="category-list">
                <div class="category-item active">全部推荐</div>
                <div class="category-item">为你精选</div>
                <div class="category-item">热门活动</div>
                <div class="category-item">附近约会</div>
                <div class="category-item">新上线</div>
                <div class="category-item">即将开始</div>
                <div class="category-item">你可能喜欢</div>
            </div>
        </div>
        
        <!-- 为你精选 -->
        <section class="mb-8">
            <h2 class="h4 mb-4 d-flex align-items-center">
                <i class="fas fa-star text-warning me-2"></i>
                为你精选
            </h2>
            
            <!-- 精选卡片 - 3张图片 -->
            <div class="dating-card featured-card fade-in">
                <div class="img-container featured-img" style="min-height: 300px;">
                    <div class="img-grid img-3">
                        <img src="https://picsum.photos/800/1000?random=1" alt="秋日户外野餐场景">
                        <img src="https://picsum.photos/400/400?random=2" alt="野餐美食布置">
                        <img src="https://picsum.photos/400/400?random=3" alt="户外游戏活动">
                    </div>
                    <div class="date-badge">本周六</div>
                    <div class="recommendation-tag">98%匹配</div>
                </div>
                
                <div class="card-content featured-content">
                    <span class="category-label cat-food">美食野餐</span>
                    <h3 class="card-title">秋日湖畔野餐，共享美食与风景</h3>
                    
                    <p class="card-desc">
                        趁着秋高气爽，组织一次湖畔野餐活动。我会准备精致的三明治、水果拼盘和气泡酒，还有桌游和蓝牙音箱。地点在城市公园的湖边草坪，视野开阔，景色宜人。希望找到同样喜欢户外活动和美食的朋友一起度过一个轻松愉快的下午。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=101" alt="陈雨的头像" class="author-avatar">
                        <div class="author-details">
                            <p class="author-name">陈雨</p>
                            <div class="location-info">
                                <i class="fas fa-map-marker-alt fa-sm"></i>
                                <span>中央公园湖畔</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-actions">
                        <div class="stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>3.8k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>96</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>18</span>
                            </div>
                        </div>
                        <div class="actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>256</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                                <span>参加</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 热门推荐 -->
        <section class="mb-8">
            <h2 class="h4 mb-4 d-flex align-items-center">
                <i class="fas fa-fire text-danger me-2"></i>
                热门推荐
            </h2>
            
            <div class="row">
                <!-- 标准卡片 - 1张图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="dating-card grid-card fade-in">
                        <div class="img-container" style="height: 200px;">
                            <img src="https://picsum.photos/600/400?random=10" alt="爵士音乐会现场">
                            <div class="date-badge">周五晚</div>
                            <div class="recommendation-tag">热门</div>
                        </div>
                        
                        <div class="card-content">
                            <span class="category-label cat-music">音乐演出</span>
                            <h3 class="card-title">爵士音乐会，沉醉于蓝调之夜</h3>
                            
                            <p class="card-desc">
                                 downtown爵士俱乐部的周末演出，有著名钢琴家和萨克斯手表演，寻找同样喜欢爵士乐的朋友。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=102" alt="李明的头像" class="author-avatar">
                                <div class="author-details">
                                    <p class="author-name">李明</p>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>蓝调爵士俱乐部</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-actions">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>2.5k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>78</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>189</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 标准卡片 - 无图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="dating-card grid-card fade-in">
                        <div class="img-container" style="height: 200px;">
                            <div class="no-img">
                                <i class="fas fa-gamepad"></i>
                                <div>桌游聚会</div>
                            </div>
                            <div class="date-badge">周日下午</div>
                        </div>
                        
                        <div class="card-content">
                            <span class="category-label cat-study">休闲社交</span>
                            <h3 class="card-title">桌游爱好者聚会，策略与欢乐并存</h3>
                            
                            <p class="card-desc">
                                桌游吧聚会，有多种策略类和欢乐类桌游可选，新手也不用担心，会有人教学。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=103" alt="王佳的头像" class="author-avatar">
                                <div class="author-details">
                                    <p class="author-name">王佳</p>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>脑力桌游吧</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-actions">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>1.7k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>54</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>124</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 水平卡片 - 2张图片 -->
                <div class="col-12">
                    <div class="dating-card horizontal-card fade-in">
                        <div class="img-container horizontal-img" style="height: 220px;">
                            <div class="img-grid img-2">
                                <img src="https://picsum.photos/600/600?random=20" alt="艺术展览作品">
                                <img src="https://picsum.photos/600/600?random=21" alt="展览现场">
                            </div>
                            <div class="date-badge">即日起至月底</div>
                            <div class="recommendation-tag">人气第一</div>
                        </div>
                        
                        <div class="card-content horizontal-content">
                            <span class="category-label cat-art">艺术展览</span>
                            <h3 class="card-title">现代艺术展《色彩与情感》，寻找艺术同好</h3>
                            
                            <p class="card-desc">
                                市美术馆新开展览，汇集了国内外多位知名艺术家的作品，探讨色彩如何影响人类情感。我有两张周末的票，希望找一位对艺术感兴趣的朋友一起参观，之后可以去馆内咖啡厅交流感受。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=104" alt="赵艺的头像" class="author-avatar">
                                <div class="author-details">
                                    <p class="author-name">赵艺</p>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>当代美术馆</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-actions">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>4.2k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>132</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-user"></i>
                                        <span>36</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>318</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-check-circle"></i>
                                        <span>参加</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 附近的约会 -->
        <section class="mb-8">
            <h2 class="h4 mb-4 d-flex align-items-center">
                <i class="fas fa-map-marker-alt text-primary me-2"></i>
                附近的约会
            </h2>
            
            <div class="row">
                <!-- 标准卡片 - 4张图片 -->
                <div class="col-md-6">
                    <div class="dating-card grid-card fade-in">
                        <div class="img-container" style="height: 200px;">
                            <div class="img-grid img-4">
                                <img src="https://picsum.photos/300/300?random=30" alt="咖啡馆环境1">
                                <img src="https://picsum.photos/300/300?random=31" alt="咖啡馆环境2">
                                <img src="https://picsum.photos/300/300?random=32" alt="咖啡饮品">
                                <img src="https://picsum.photos/300/300?random=33" alt="甜点">
                            </div>
                            <div class="date-badge">明天下午</div>
                            <div class="recommendation-tag">1.2km</div>
                        </div>
                        
                        <div class="card-content">
                            <span class="category-label cat-food">咖啡品鉴</span>
                            <h3 class="card-title">精品咖啡馆尝鲜，手冲咖啡品鉴会</h3>
                            
                            <p class="card-desc">
                                家附近新开的精品咖啡馆，主打单一产地手冲咖啡，老板是咖啡师大赛获奖选手，想找人一起去尝尝。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=105" alt="孙咖啡的头像" class="author-avatar">
                                <div class="author-details">
                                    <p class="author-name">孙咖啡</p>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>街角咖啡实验室</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-actions">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>986</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>32</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>76</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 标准卡片 - 1张图片 -->
                <div class="col-md-6">
                    <div class="dating-card grid-card fade-in">
                        <div class="img-container" style="height: 200px;">
                            <img src="https://picsum.photos/600/400?random=40" alt="城市夜跑路线">
                            <div class="date-badge">每晚7点</div>
                            <div class="recommendation-tag">800m</div>
                        </div>
                        
                        <div class="card-content">
                            <span class="category-label cat-sport">户外运动</span>
                            <h3 class="card-title">城市夜跑小分队，健康社交两不误</h3>
                            
                            <p class="card-desc">
                                每天晚上在滨河公园组织轻松夜跑，5公里休闲路线，适合各种水平，跑完可一起拉伸聊天。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=106" alt="周跑的头像" class="author-avatar">
                                <div class="author-details">
                                    <p class="author-name">周跑</p>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>滨河公园</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-actions">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>1.3k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>45</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>98</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 你可能喜欢 -->
        <section class="mb-8">
            <h2 class="h4 mb-4 d-flex align-items-center">
                <i class="fas fa-thumbs-up text-success me-2"></i>
                你可能喜欢
            </h2>
            
            <div class="row">
                <!-- 瀑布流风格卡片 -->
                <div class="col-md-6 col-lg-3">
                    <div class="dating-card fade-in" style="height: 100%;">
                        <div class="img-container" style="height: 220px;">
                            <img src="https://picsum.photos/600/800?random=50" alt="烘焙课程">
                            <div class="date-badge">下周六</div>
                        </div>
                        
                        <div class="card-content">
                            <span class="category-label cat-food">美食制作</span>
                            <h3 class="card-title">手工曲奇烘焙课，甜蜜时光共享</h3>
                            
                            <p class="card-desc">
                                专业烘焙师教学，制作美味曲奇饼干，成品可以带走，适合喜欢甜点的朋友。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=107" alt="林甜的头像" class="author-avatar">
                                <div class="author-details">
                                    <p class="author-name">林甜</p>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>甜蜜烘焙坊</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-actions">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>765</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-user"></i>
                                        <span>12</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>54</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-check-circle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-3">
                    <div class="dating-card fade-in">
                        <div class="img-container" style="height: 180px;">
                            <div class="no-img">
                                <i class="fas fa-paint-brush"></i>
                                <div>绘画体验</div>
                            </div>
                            <div class="date-badge">周日全天</div>
                        </div>
                        
                        <div class="card-content">
                            <span class="category-label cat-art">艺术创作</span>
                            <h3 class="card-title">零基础油画体验，释放创造力</h3>
                            
                            <p class="card-desc">
                                画室提供所有材料，专业老师指导，即使没有基础也能完成一幅作品。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=108" alt="吴画的头像" class="author-avatar">
                                <div class="author-details">
                                    <p class="author-name">吴画</p>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>色彩空间画室</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-actions">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>632</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>28</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>47</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-3">
                    <div class="dating-card fade-in" style="height: 100%;">
                        <div class="img-container" style="height: 220px;">
                            <div class="img-grid img-3">
                                <img src="https://picsum.photos/600/1200?random=60" alt="登山风景">
                                <img src="https://picsum.photos/300/600?random=61" alt="山顶全景">
                                <img src="https://picsum.photos/300/600?random=62" alt="山间溪流">
                            </div>
                            <div class="date-badge">下周日</div>
                        </div>
                        
                        <div class="card-content">
                            <span class="category-label cat-travel">户外登山</span>
                            <h3 class="card-title">短途登山活动，欣赏秋日山景</h3>
                            
                            <p class="card-desc">
                                难度适中的一日登山路线，往返约6小时，山顶风景绝佳，适合有一定体力的朋友。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=109" alt="郑山的头像" class="author-avatar">
                                <div class="author-details">
                                    <p class="author-name">郑山</p>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>青山国家公园</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-actions">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>890</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-user"></i>
                                        <span>15</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>68</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-check-circle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-3">
                    <div class="dating-card fade-in">
                        <div class="img-container" style="height: 180px;">
                            <img src="https://picsum.photos/600/600?random=70" alt="电影放映会">
                            <div class="date-badge">周六晚</div>
                        </div>
                        
                        <div class="card-content">
                            <span class="category-label cat-movie">电影欣赏</span>
                            <h3 class="card-title">经典老电影放映会，《罗马假日》重温</h3>
                            
                            <p class="card-desc">
                                社区影院的经典电影系列，这次放映《罗马假日》，提供免费爆米花和饮料。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=110" alt="钱影的头像" class="author-avatar">
                                <div class="author-details">
                                    <p class="author-name">钱影</p>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>社区文化中心</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-actions">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>543</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>23</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>36</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 加载更多按钮 -->
        <button class="load-more" id="loadMoreBtn">
            <i class="fas fa-sync-alt me-2"></i>加载更多推荐
        </button>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white py-5 border-top">
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="logo mb-3">
                        <i class="fas fa-heart"></i>
                        <span>心动社交</span>
                    </div>
                    <p class="text-muted mb-0" style="max-width: 400px;">
                        连接有趣的灵魂，发现精彩的约会。在这里，每一次相遇都是美好的开始。
                    </p>
                </div>
                
                <div class="col-md-3 mb-4">
                    <h5 class="font-weight-medium mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#" class="text-muted">首页</a></li>
                        <li class="mb-2"><a href="#" class="text-muted">约会推荐</a></li>
                        <li class="mb-2"><a href="#" class="text-muted">附近活动</a></li>
                        <li class="mb-2"><a href="#" class="text-muted">帮助中心</a></li>
                    </ul>
                </div>
                
                <div class="col-md-3">
                    <h5 class="font-weight-medium mb-3">联系我们</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2 text-muted"><i class="fas fa-envelope me-2"></i>contact@xindong.com</li>
                        <li class="mb-2 text-muted"><i class="fas fa-phone me-2"></i>400-123-4567</li>
                    </ul>
                    <div class="mt-3">
                        <a href="#" class="text-muted me-3"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="text-muted me-3"><i class="fab fa-wechat"></i></a>
                        <a href="#" class="text-muted"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="text-center mt-5 pt-3 border-top">
                <p class="text-muted mb-0">&copy; 2023 心动社交 - 让每次约会都充满惊喜</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 滚动渐入动画
            const fadeElements = document.querySelectorAll('.fade-in');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.style.opacity = '1';
                            entry.target.style.transform = 'translateY(0)';
                        }, index * 100);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            fadeElements.forEach(el => observer.observe(el));
            
            // 分类切换
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('click', function() {
                    categoryItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    // 实际项目中添加筛选逻辑
                });
            });
            
            // 点赞功能
            const likeButtons = document.querySelectorAll('.action-btn');
            likeButtons.forEach(btn => {
                if (btn.querySelector('.fa-heart')) {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const icon = this.querySelector('i');
                        const countSpan = this.querySelector('span');
                        
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.classList.add('liked');
                            countSpan.textContent = (parseInt(countSpan.textContent) + 1).toString();
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.classList.remove('liked');
                            countSpan.textContent = (parseInt(countSpan.textContent) - 1).toString();
                        }
                    });
                }
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.action-btn');
            saveButtons.forEach(btn => {
                if (btn.querySelector('.fa-bookmark')) {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const icon = this.querySelector('i');
                        
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.classList.add('saved');
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.classList.remove('saved');
                        }
                    });
                }
            });
            
            // 参加功能
            const joinButtons = document.querySelectorAll('.action-btn');
            joinButtons.forEach(btn => {
                if (btn.querySelector('.fa-check-circle')) {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const card = this.closest('.dating-card');
                        const title = card.querySelector('.card-title').textContent;
                        
                        if (confirm(`确定要参加"${title}"吗？`)) {
                            this.innerHTML = '<i class="fas fa-check"></i> 已参加';
                            this.disabled = true;
                            this.style.color = '#28a745';
                            
                            // 更新参加人数
                            const userStat = card.querySelector('.stat-item:last-child span');
                            if (userStat) {
                                let count = parseInt(userStat.textContent);
                                userStat.textContent = (count + 1).toString();
                            }
                        }
                    });
                }
            });
            
            // 卡片点击事件
            const datingCards = document.querySelectorAll('.dating-card');
            datingCards.forEach(card => {
                card.addEventListener('click', function() {
                    const title = this.querySelector('.card-title').textContent;
                    alert(`查看"${title}"的详细信息`);
                    // 实际应用中可以跳转到详情页
                });
            });
            
            // 加载更多按钮
            document.getElementById('loadMoreBtn').addEventListener('click', function() {
                const btn = this;
                const icon = btn.querySelector('i');
                
                // 显示加载状态
                icon.classList.add('fa-spin');
                btn.classList.add('loading');
                btn.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    icon.classList.remove('fa-spin');
                    btn.classList.remove('loading');
                    btn.disabled = false;
                    alert('已加载全部推荐内容');
                }, 1500);
            });
        });
    </script>
</body>
</html>
    
